<!-- GRID VIEW -->
<div class="grid-view" layout="column">
    <div class="folders" layout="row" layout-wrap>
        <div class="md-background-bg md-hue-1 md-whiteframe-1dp item folder" ng-click="vm.select(folder)" ng-repeat="folder in vm.folders | filter:global.search" layout="row" layout-align="space-between center">
            <div layout="row" class="title" layout-align="start center">
                <span class="file-icon">
                    <md-icon md-font-icon="icon-{{folder.type}}"></md-icon>
                </span>
                <span class="name">{{folder.name}}</span>
            </div>

            <div class="show-details" hide-gt-md>
                <md-button class="md-icon-button sidenav-toggle" aria-label="Details" translate translate-attr-aria-label="FM.DETAILS">
                    <md-icon md-font-icon="icon-information-outline" ng-click="vm.toggleDetails(folder)"></md-icon>
                </md-button>
            </div>
        </div>

    </div>

    <div class="files" layout="row" layout-wrap>
        <div ng-click="vm.select(file)" class="md-whiteframe-1dp item file" ng-repeat="file in vm.files | filter:global.search" layout="column">
            <div class="preview">
                <img ng-src="{{file.preview}}">
            </div>

            <div class="bottom md-background-bg md-hue-1" layout="row" layout-align="space-between center">
                <div layout="row" class="title" layout-align="start center" flex>
                    <span class="file-icon">
                        <md-icon md-font-icon="icon-{{file.type}}"></md-icon>
                    </span>
                    <span class="name">{{file.name}}</span>
                </div>

                <div class="show-details" hide-gt-md>
                    <md-button class="md-icon-button sidenav-toggle" aria-label="Details" translate translate-attr-aria-label="FM.DETAILS">
                        <md-icon md-font-icon="icon-information-outline" ng-click="vm.toggleDetails(file)"></md-icon>
                    </md-button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- / GRID VIEW -->